<template>
	<view>
		<movable-area class="movable-area" :scale-area="false">
			<movable-view class="movable-view" :class="!isRemove?'animation-info':''" style="pointer-events: auto;"
				@click="clickBtn" @touchstart="touchstart" @touchend="touchend" @change="onChange" direction="all"
				inertia="true" :x="x" :y="y" :disabled="disabled" :out-of-bounds="true" :damping="200" :friction="100">
				<view class="">
					<view v-if="$slots.default">
						<slot />
					</view>
					<view class="" v-else>
						<image class="img104" src="@/static/index/ft.png" mode=""></image>
					</view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		props: {
			//是否禁用拖动
			disabled: {
				type: Boolean,
				default: false
			},
			//是否自动停靠
			canDocking: {
				type: Boolean,
				default: true
			},
			//按钮默认位置离底部距离（px）
			bottomPx: {
				type: Number,
				default: 280
			},
			//按钮默认位置离右边距离（px）
			rightPx: {
				type: Number,
				default: 5
			},
		},
		data() {
			return {
				left: 0,
				top: 0,
				isRemove: true,
				windowWidth: 0,
				windowHeight: 0,
				btnWidth: 0,
				btnHeight: 0,
				x: 10000,
				y: 10000,
				old: {
					x: 0,
					y: 0
				},

				show: false, //弹窗
				config_data: { //弹窗信息
					wxNum: '',
					hint: '',
				},
				sysInfo: '',
			};
		},
		mounted() {
			this.getSysInfo()
		},
		methods: {
			getSysInfo() {
				this.sysInfo = uni.getSystemInfoSync()
				console.log(this.sysInfo);
				this.windowWidth = this.sysInfo.windowWidth
				this.windowHeight = this.sysInfo.windowHeight
				let view = uni.createSelectorQuery().in(this).select(".movable-view")
				view.boundingClientRect(rect => {
					this.btnWidth = rect.width
					this.btnHeight = rect.height
					this.x = this.old.x
					this.y = this.old.y
					this.$nextTick(res => {
						this.x = this.windowWidth - this.btnWidth - this.rightPx
						this.y = this.windowHeight - this.btnHeight - this.bottomPx
					})
				}).exec()
			},
			//移动按钮
			onChange(e) {
				// console.log(e);
				this.old.x = e.detail.x
				this.old.y = e.detail.y
			},
			//开始移动
			touchstart(e) {
				this.isRemove = true
			},
			//结束移动
			touchend(e) {
				if (this.canDocking && this.old.x) {
					this.x = this.old.x
					this.y = this.old.y
					let bWidth = (this.windowWidth - this.btnWidth) / 2

					this.$nextTick(res => {
						this.x = this.windowWidth - this.btnWidth - this.rightPx

						if (this.y < this.navh) {
							this.y = this.navh
						} else if (this.y > this.windowHeight - 50) {
							this.y = this.windowHeight - 50
						}
					})
					// console.log(22);
					this.$emit('update:direction', 'right')


					// if (this.x < 0 || (this.x > 0 && this.x <= bWidth)) {
					// 	// this.$nextTick(res => {
					// 	// 	this.x = 0
					// 	// })
					// 	console.log(11);
					// 	// this.$emit('update:direction','left')
					// } else {
					// 	this.$nextTick(res => {
					// 		this.x = this.windowWidth - this.btnWidth
					// 	})
					// 	console.log(22);
					// 	this.$emit('update:direction','right')
					// }
					this.isRemove = false
				}
			},
			//点击按钮
			clickBtn() {
				this.$emit('clickBtn')
			},
		}
	};
</script>

<style scoped lang="scss">
	.movable-view {
		width: 114upx;
		height: 114upx;
		border-radius: 50%;
	}

	.animation-info {
		transition: left .25s ease;
	}

	.movable-area {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 989 !important;
		pointer-events: none;
	}

	.warp {
		width: 428upx;
		min-height: 340upx;
		border-radius: 10upx;
		padding: 40upx 46upx;

		.wx_num {
			padding: 16upx 24upx;
			background: #F5F5F5;
			border-radius: 16upx;
		}
	}
</style>